<template>
  <view class="container">
    <!-- 表单内容 -->
    <u-form class="form-content">
      <dynamic-inputs
        :inputConfigs="inputConfigs"
        @input-change="handleInputChange"
        :label="label"
      ></dynamic-inputs>

      <u-form-item label="请输入车牌号码" class="form-item" label-width="120">
        <u-input
          v-model="formData.plateNumber"
          placeholder="请输入车牌号码"
          class="custom-input"
        />
      </u-form-item>

      <!-- 道路运输证号输入 -->
      <u-form-item label="道路运输证号" class="form-item" label-width="120">
        <u-input
          v-model="formData.transportNumber"
          placeholder="请输入道路运输证号"
          class="custom-input"
        />
      </u-form-item>
    </u-form>

    <!-- 查询按钮 -->
    <view class="btn-container">
      <u-button @click="submitForm">立即查询</u-button>
    </view>
  </view>
</template>

<script>
import DynamicInputs from "@/components/area-pickerselect/dynamicInputs.vue";
import areaPicker from "@/components/area-picker/area-picker.vue";
import { getVehicleQuery } from "@/common/api/hub_ygzw/vehicle/vehicle.js";

export default {
  components: {
    areaPicker,
    DynamicInputs,
  },
  data() {
    return {
      inputConfigs: [
        // { functionName: "getGPSResult", placeholder: "请选择GPS结果" },
        {
          functionName: "pronameChangecode",
          placeholder: "省区划分",
          label: "省区划分",
        },
        {
          functionName: "changePlatecolor",
          placeholder: "车牌颜色",
          label: "车牌颜色",
        },

        // {
        //   apiurl: "http://192.168.2.2:3000/haha",
        //   label: "practypenames",
        //   value: "pc.practypecodes",
        //   placeholder: "111111",
        //   houtaiurl: "http://192.168.2.2:3000/jieshou",
        // },
      ],

      formData: {
        plateNumber: "鄂E45286", // 车牌号码
        plateColor: "", // 车牌颜色
        transportNumber: "", // 道路运输证号
        provinceCode: "", // 省份代码
        plateColorCode: "", // 车牌颜色代码
      },
    };
  },

  methods: {
    handleInputChange(data) {
      console.log("输入变化:", data);

      // 使用 data.functionName 而不是 data.value.functionName
      if (data.functionName === "pronameChangecode") {
        this.formData.provinceCode = data.value.value;
        console.log("更新省份代码:", this.formData.provinceCode);
      } else if (data.functionName === "changePlatecolor") {
        this.formData.plateColorCode = data.value.value;
        console.log("更新车牌颜色代码:", this.formData.plateColorCode);
      }

      // 可以在这里添加其他字段的更新逻辑

      // 每次更新后，您可以选择立即发送数据到后台，或者在表单提交时一起发送
      this.sendDataToBackend();
    },

    // 可以添加一个方法来发送数据到后台
    sendDataToBackend() {
      // 在这里实现发送数据到后台的逻辑
      console.log("发送到后台的数据:", {
        provinceCode: this.formData.provinceCode,
        plateColorCode: this.formData.plateColorCode,
        // 其他需要发送的数据...
      });
    },

    // 修改获取营运车辆数据的方法
    getVehicleQuery(page = 1) {
      const params = {
        funcType: "QB0101",
        provinceCode: this.formData.provinceCode,
        vehicleNo: this.formData.plateNumber || "鄂E45286",
        plateColorCode: this.formData.plateColorCode,
        page: page,
      };
      getVehicleQuery(params)
        .then((res) => {
          if (res.statusCode === 200 && res.data.data.vehicleInfo.length > 0) {
            const vehicleData = res.data.data.vehicleInfo[0];
            uni.navigateTo({
              url: `/pages/hub_ygzw/vehicle/vehicleInfo?vehicleData=${encodeURIComponent(
                JSON.stringify(vehicleData)
              )}`,
            });
          } else {
            uni.showToast({
              title: "未找到车辆信息",
              icon: "none",
            });
          }
        })
        .catch((error) => {
          console.error("获取车辆列表失败:", error);
          uni.showToast({
            title: "获取车辆列表失败",
            icon: "none",
          });
        });
    },

    submitForm() {
      if (!this.formData.plateNumber) {
        uni.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }
      // 调用获取车辆列表接口
      this.getVehicleQuery();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
  background-color: #f3f6fa;
  height: 100vh;
  box-sizing: border-box;
}

.form-content {
  background-color: #ffffff;
  padding: 0;
  /* 去掉 padding */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  ::v-deep uni-view.u-input.u-border.u-input--radius.u-input--square {
    border: none;
  }
  // ::v-deep .select-wrapper {
  //   border-bottom: 1px solid #f1f1f1;
  // }
}
::v-deep .u-form-item {
  padding: 0 10px !important;
  border-bottom: 1px solid #f1f1f1;
}

.form-item {
  padding: 0 10px;
  border-bottom: 1px solid #f1f1f1;
  /* 设置下边框 */
}

.custom-input {
  border: none;
  /* 去掉输入框的边框 */
  background-color: transparent;
  /* 使背景透明 */
}

.btn-container {
  margin-top: 30px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  right: 0;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  ::v-deep .u-button--info[data-v-461e713c] {
    width: 100%;
    background-color: #2877ff;
    color: #ffffff;
  }
}

.arrow-icon-groud {
  position: relative;
  flex: 1;

  .arrow-icon {
    position: absolute !important;
    right: 20px;
    top: 10px;
  }
}
</style>
